<template>
  <a-form
    :form="form"
   v-bind="layout" 
    @submit="handleAddSubmit"
    hide-required-mark >
    <a-row >
      <a-col :span="16" :offset="3">
        <a-form-item label="名称">
          <a-input
            v-decorator="[
              'name',
              {
                rules: [{ required: true, message: '请输入名称' }],
                initialValue: tempForm.name,
              },
            ]"
            placeholder="请输入名称"
          />
        </a-form-item>
      </a-col>
      <a-col :span="16" :offset="3">
        <a-form-item label="排序">
          <a-input type="number"
            style="width: 100%"
            v-decorator="[
              'sort',
              {
                rules: [
                  { required: true, message: '请输入排序' },
                ],
                initialValue: tempForm.sort,
              },
            ]"
            placeholder="请输入排序"
          />
        </a-form-item>
      </a-col>
    </a-row>
  </a-form>
</template>

<script>
export default {
  name: "List",
  props: {
    tempForm: {
      type: Object,
      default: () => {
        return {}
      },
    }
  },
  data() {
    return {
       layout: {
        labelCol: { span: 5 },
        wrapperCol: { span: 18 },
      },
      form: {},
      imageUrl: "",
      currentRole: "",
      loading: false,
      previewVisible: false,
    };
  },
  created() {
    if (this.tempForm && this.tempForm.id) {
      this.openUpdateForm();
      } else {
      this.openAddForm();
    }
  },
  mounted() {
  },
  methods: {
    openAddForm() {
      this.form = this.$form.createForm(this, { name: "add" });
    },
    openUpdateForm(item) {
      this.form = this.$form.createForm(this, { name: "update" });
    },
    save() {
      if (this.tempForm && this.tempForm.id) {
        this.handleUpdateSubmit()
      } else {
        this.handleAddSubmit()
      }
    },
    handleAddSubmit(e) {
      this.form.validateFields((err, values) => {
        if (!err) {
          this.$ajax({
            url: this.$api.system.role.addRole,
            data: Object.assign({ avatar: this.photo }, values),
            success: (result) => {
              this.$message.success("新增成功");
              this.$emit('pass', null);
            },
            fail: (err) => {
              this.$emit('reject', null);
            }
          });
        } else {
          console.log(err);
          this.$emit('reject', null);
        }
      });
    },
    handleUpdateSubmit(e) {
      this.form.validateFields((err, values) => {
        if (!err) {
          this.$ajax({
            url: this.$api.system.role.updateRole,
            data: Object.assign(
              { id: this.tempForm.id, avatar: this.photo },
              values
            ),
            success: (result) => {
              this.$message.success("修改成功");
              this.$emit('pass', null);
            },
            fail: (err) => {
              this.$emit('reject', null);
            }
          });
        } else {
          console.log(err);
          this.$emit('reject', null);
        }
      });
    },
    handleCancel() {
      this.previewVisible = false;
    },
    showData(item) {
      this.tempForm = item;
      this.visibleForConfig = true;
      this.findUserRoleList();
    },
    handleRoleChange(value) {
      this.currentRole = value;
    },
  }, // methods
};
</script>
<style lang="less" scoped>
.ant-form-item-with-help {
    margin-bottom: 24px !important;
}
</style>